<template>
  <div>
    <a-card :bordered="false" style="height: 400px;">
<!--      <div slot="title"  style="display: flex; align-items: center;"><a-icon type="file-done"  :style="{ color: 'blue', fontSize: '16px', marginRight: '5px' }" />通知消息</div>-->
      <a slot="extra" @click="viewAllTask" style="color: #999;">查看全部 ></a>
      <!-- 查询区域 -->
      <a-table
        ref="table"
        size="default"
        rowKey="id"
        :scroll="{y:230}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        @change="handleTableChange">
      <span slot="action" slot-scope="text, record">
<!--        <a @click="showAnnouncement(record)">查看消息</a><p/>-->
        <a @click="showDetails(record)">查看详情</a>
      </span>
      </a-table>
      <show-announcement ref="ShowAnnouncement" @ok="modalFormOk"></show-announcement>
      <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
      <fault-reporting-detail ref="faultReportingDetail"></fault-reporting-detail>
    </a-card>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { putAction,getAction } from '@lone/lone-vue/src/api/manage'
  import JEllipsis from '@lone/lone-vue/src/components/jeecg/JEllipsis'
  import ShowAnnouncement from '@lone/lone-vue/src/components/tools/ShowAnnouncement'
  import DynamicNotice from '@lone/lone-vue/src/components/tools/DynamicNotice'
  // D:\vue-workspace-new\lone-vue\src\components\tools\DynamicNotice.vue
  import { JeecgListMixin } from '@lone/lone-vue/src/mixins/JeecgListMixin'
  import NutUI from '@nutui/nutui'
  import '@nutui/nutui/dist/nutui.scss'
  import FaultReportingDetail from './form/FaultReportingDetail'
  NutUI.install(Vue)

  function renderMsgCategory(text) {
    if (text == '1') {
      return '通知公告'
    } else if (text == '2') {
      return '系统消息'
    } else {
      return text
    }
  }

  function renderPriority(text) {
    if (text == 'L') {
      return '低'
    } else if (text == 'M') {
      return '中'
    } else if (text == 'H') {
      return '高'
    } else {
      return text
    }
  }

  function renderReadFlag(text) {
    if (text == '0') {
      return '未读'
    } else if (text == '1') {
      return '已读'
    } else {
      return text
    }
  }


  export default {
    name: 'UserAnnouncementList',
    mixins: [JeecgListMixin],
    components: {
      DynamicNotice,
      ShowAnnouncement,
      JEllipsis,
      FaultReportingDetail
    },
    data() {
      return {
        description: '系统通告表管理页面',
        queryParam: {},
        formData: {},
        columns: [{
          title: '标题',
          align: 'center',
          dataIndex: 'titile',
          width:100,
        }, {
          title: '消息类型',
          align: 'center',
          dataIndex: 'msgCategory',
          width:100,
          customRender: renderMsgCategory
        }, {
          title: '发布人',
          align: 'center',
          dataIndex: 'sender',
        }, {
          title: '发布时间',
          align: 'center',
          dataIndex: 'sendTime'
        }, {
          title: '优先级',
          align: 'center',
          dataIndex: 'priority',
          customRender: renderPriority
        }, {
          title: '阅读状态',
          align: 'center',
          dataIndex: 'readFlag',
          customRender: renderReadFlag
        }, {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }],
        url: {
          list: '/system/sysAnnouncementSend/getMyAnnouncementSend',
          editCementSend: 'system/sysAnnouncementSend/editByAnntIdAndUserId',
          readAllMsg: 'system/sysAnnouncementSend/readAll'
        },
        loading: false,
        openPath: ''
      }
    },
    created() {
      // this.loadData();
      this.resetScreenSize(260)
    },
    methods: {
      handleDetail: function(record) {
        this.$refs.sysAnnouncementModal.detail(record)
        this.$refs.sysAnnouncementModal.title = '查看'
      },
      showAnnouncement(record) {
        putAction(this.url.editCementSend, { anntId: record.anntId }).then((res) => {
          if (res.success) {
            this.loadData()
            this.syncHeadNotic(record.anntId)
          }
        })
        if (record.openType === 'component') {
          this.openPath = record.openPage
          this.formData = { id: record.busId }
          this.$refs.showDynamNotice.detail()
        } else {
          this.$refs.ShowAnnouncement.detail(record)
        }
      },


      syncHeadNotic(anntId) {
        getAction('sys/annountCement/syncNotic', { anntId: anntId })
      },


      readAll() {
        var that = this
        that.$confirm({
          title: '确认操作',
          content: '是否全部标注已读?',
          onOk: function() {
            putAction(that.url.readAllMsg).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadData()
                that.syncHeadNotic()
              }
            })
          }
        })
      },
      showDetails(record){
        putAction(this.url.editCementSend, { anntId: record.anntId }).then((res) => {
          if (res.success) {
            this.loadData()
            this.syncHeadNotic(record.anntId)
          }
        })
        this.$refs.faultReportingDetail.showDetails(record)

      },
      viewAllTask(){
        this.$router.push({ name: 'isystem-userAnnouncement', query: {} })
      }
    }
  }
</script>
<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }
  .ant-card-body .table-operator{
    margin-bottom: 18px;
  }
  .ant-table-tbody .ant-table-row td{
    padding-top:15px;
    padding-bottom:15px;
  }
  .anty-row-operator button{margin: 0 5px}
  .ant-btn-danger{background-color: #ffffff}

  .ant-modal-cust-warp{height: 100%}
  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}

  .bacColorGreen{
    background: green;
  }

  .custom-table-wrap {
    height: 200px;
    /deep/table {
      .ant-table-thead > tr > th {
        background-color: transparent;
      }
    }
  }
  /*.custom-card {*/
  /*  /deep/.ant-card-body {*/
  /*    padding-top: 0;*/
  /*    height: 300px;*/
  /*  }*/
  /*}*/
</style>>